<template>
	<view class="base-menu-list-component">
		<view class="base-menu-body">
			<view class="base-menu-title">{{ title }}</view>
			<slot>
				<view class="base-menu-list">
					<button
						v-for="(item, index) in list"
						:key="index"
						hover-class="none"
						:open-type="item.openType"
						:hover-stop-propagation="true"
						class="base-menu-item"
						@click="choose(item)"
					>
						<view
							class="menu-image"
							:style="{
								width: iconSize,
								height: iconSize
							}"
						>
							<image class="icon-menu" :src="item.icon"></image>
						</view>
						<view class="menu-txt">{{ item.title }}</view>
					</button>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: String,
		list: Array,
		iconSize: {
			type: String,
			default: '56rpx'
		}
	},
	methods: {
		choose (item) {
			if (item.openType) return
			this.$emit('jump', item)
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>